"use client";

import styles from "./index.module.scss";
import ScrollView, { ScrollEvent } from "@/components/scrollView";
import ImageAnimate from "@/components/imageAnimate";
import HaloAnimate from "@/components/haloAnimate";
import LineAnimate from "@/components/lineAnimate";
import TextAnimate from "@/components/textAnimate";
import { useState, useRef, useEffect } from "react";
import { useTranslations } from 'next-intl';
import LanguageSwitcher from '@/components/LanguageSwitcher'

export default function Home() {
  const t = useTranslations('home');
  const translateYRef = useRef(0);
  const elementRef = useRef<HTMLDivElement>(null);
  const elementBoxRef = useRef<HTMLDivElement>(null);
  // 处理滚动事件
  const handleScroll = (event: ScrollEvent) => {
    console.log("滚动事件触发:", event);

    // 检查 elementBoxRef 是否进入视界
    if (elementBoxRef.current) {
      const elementRect = elementBoxRef.current.getBoundingClientRect();
      const viewportHeight = window.innerHeight;

      // 当元素顶部进入视界时开始跟随滚动
      const isInView =
        elementRect.top <= viewportHeight && elementRect.bottom >= 0;

      if (isInView) {
        // 计算元素进入视界的进度 (0-1)
        const progress = Math.max(
          0,
          Math.min(1, (viewportHeight - elementRect.top) / viewportHeight)
        );

        // 根据进度计算跟随滚动的偏移量
        const followOffset = progress * 300;
        translateYRef.current = followOffset;
      } else {
        translateYRef.current = 0;
      }
    }

    // 直接操作 DOM 元素，避免重新渲染
    if (elementRef.current) {
      elementRef.current.style.transform = `translateY(${translateYRef.current}px)`;
    }
  };

  // 处理滚动开始事件
  const handleScrollStart = () => {
    console.log("滚动开始");
  };

  // 处理滚动结束事件
  const handleScrollEnd = () => {
    console.log("滚动结束");
  };

  return (
    <div className={styles.home}>
      <ScrollView
        onScroll={handleScroll}
        onScrollStart={handleScrollStart}
        onScrollEnd={handleScrollEnd}
      >
        <div style={{
          position: "fixed",
          top: 0,
          right: 0,
          zIndex: 1000,
        }}>
          <LanguageSwitcher />
        </div>

        {/* ImageAnimate 组件示例 */}
        <div
          style={{
            padding: "40px 20px",
            // background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
            minHeight: "100vh",
          }}
        >
          <h1
            style={{
              textAlign: "center",
              color: "white",
              marginBottom: "40px",
              fontSize: "2.5rem",
              fontWeight: "bold",
            }}
          >
            {t('welcome')}
          </h1>

          <div
            style={{
              display: "grid",
              gap: "30px",
              gridTemplateColumns: "repeat(auto-fit, minmax(350px, 1fr))",
              maxWidth: "1200px",
              margin: "0 auto",
            }}
          >
            <div style={{ textAlign: "center" }}>
              <h3 style={{ color: "white", marginBottom: "15px" }}>
                {t('basicScaleEffect')}
              </h3>
              <ImageAnimate effect="scale" scale={1.3} borderColor="#ff6b6b">
                <img
                  src="https://picsum.photos/350/250?random=1"
                  alt="示例图片1"
                  style={{ width: "100%", height: "250px", objectFit: "cover" }}
                />
              </ImageAnimate>
            </div>

            <div style={{ textAlign: "center" }}>
              <h3 style={{ color: "white", marginBottom: "15px" }}>
                {t('mouseFollowEffect')}
              </h3>
              <ImageAnimate effect="mouseFollow" borderColor="#4ecdc4">
                <img
                  src="https://picsum.photos/350/250?random=2"
                  alt="示例图片2"
                  style={{ width: "100%", height: "250px", objectFit: "cover" }}
                />
              </ImageAnimate>
            </div>

            <div style={{ textAlign: "center" }}>
              <h3 style={{ color: "white", marginBottom: "15px" }}>
                位置相关缩放
              </h3>
              <ImageAnimate
                effect="positionScale"
                scale={1.4}
                borderColor="#45b7d1"
              >
                <img
                  src="https://picsum.photos/350/250?random=3"
                  alt="示例图片3"
                  style={{ width: "100%", height: "250px", objectFit: "cover" }}
                />
              </ImageAnimate>
            </div>

            <div style={{ textAlign: "center" }}>
              <h3 style={{ color: "white", marginBottom: "15px" }}>综合效果</h3>
              <ImageAnimate effect="all" scale={1.5} borderColor="#96ceb4">
                <img
                  src="https://picsum.photos/350/250?random=4"
                  alt="示例图片4"
                  style={{ width: "100%", height: "250px", objectFit: "cover" }}
                />
              </ImageAnimate>
            </div>

            <div style={{ textAlign: "center" }}>
              <h3 style={{ color: "white", marginBottom: "15px" }}>
                自定义边框
              </h3>
              <ImageAnimate
                effect="scale"
                scale={1.2}
                borderWidth={4}
                borderColor="#feca57"
                duration={0.5}
              >
                <img
                  src="https://picsum.photos/350/250?random=5"
                  alt="示例图片5"
                  style={{ width: "100%", height: "250px", objectFit: "cover" }}
                />
              </ImageAnimate>
            </div>

            <div style={{ textAlign: "center" }}>
              <h3 style={{ color: "white", marginBottom: "15px" }}>慢速动画</h3>
              <ImageAnimate
                effect="positionScale"
                scale={1.6}
                duration={0.8}
                ease="power3.out"
                borderColor="#ff9ff3"
              >
                <img
                  src="https://picsum.photos/350/250?random=6"
                  alt="示例图片6"
                  style={{ width: "100%", height: "250px", objectFit: "cover" }}
                />
              </ImageAnimate>
            </div>
          </div>
        </div>
        <div
          style={{
            padding: "40px 20px",
            minHeight: "100vh",
          }}
        >
          <h1
            style={{
              textAlign: "center",
              color: "white",
              marginBottom: "40px",
              fontSize: "2.5rem",
              fontWeight: "bold",
            }}
          >
            HaloAnimate 光晕效果演示
          </h1>

          <div
            style={{
              display: "grid",
              gap: "40px",
              gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
              maxWidth: "1200px",
              margin: "0 auto",
            }}
            ref={elementBoxRef}
          >
            <div ref={elementRef} style={{ textAlign: "center" }}>
              <HaloAnimate size={600} color="#ffffff" />
            </div>

            <div style={{ textAlign: "center" }}>
              <h3 style={{ color: "white", marginBottom: "20px" }}>蓝色光晕</h3>
              <HaloAnimate size={800} color="#ff0000" />
            </div>
          </div>
        </div>
        {/* HaloAnimate 光晕效果组件示例 */}
        <div
          style={{
            padding: "40px 20px",
            minHeight: "100vh",
          }}
        >
          <h1
            style={{
              textAlign: "center",
              color: "white",
              marginBottom: "40px",
              fontSize: "2.5rem",
              fontWeight: "bold",
            }}
          >
            HaloAnimate 光晕效果演示
          </h1>

          <div
            style={{
              display: "grid",
              gap: "40px",
              gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
              maxWidth: "1200px",
              margin: "0 auto",
            }}
          >
            <div style={{ textAlign: "center" }}>
              <h3 style={{ color: "white", marginBottom: "20px" }}>
                基础白色光晕
              </h3>
              <HaloAnimate size={600} color="#ffffff" />
            </div>

            <div style={{ textAlign: "center" }}>
              <h3 style={{ color: "white", marginBottom: "20px" }}>蓝色光晕</h3>
              <HaloAnimate size={800} color="#ff0000" />
            </div>
          </div>
        </div>

        {/* LineAnimate 线条动画组件示例 */}
        <div
          style={{
            padding: "40px 20px",
            minHeight: "100vh",
            position: "relative",
            overflow: "hidden",
          }}
        >
          <h1
            style={{
              textAlign: "center",
              color: "white",
              marginBottom: "40px",
              fontSize: "2.5rem",
              fontWeight: "bold",
              position: "relative",
            }}
          >
            LineAnimate 线条动画演示
          </h1>

          <div
            style={{
              display: "grid",
              gap: "40px",
              gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
              maxWidth: "1200px",
              margin: "0 auto",
            }}
          >
            <div style={{ textAlign: "center" }}>
              <h3 style={{ color: "#ff0000", marginBottom: "20px" }}>
                直线射线
              </h3>
              <LineAnimate
                type="straight"
                width={300}
                height={100}
                lineLength={60}
                color="#ff0000"
                duration={1.5}
              />
            </div>

            <div style={{ textAlign: "center" }}>
              <h3 style={{ color: "white", marginBottom: "20px" }}>曲线射线</h3>
              <LineAnimate
                type="curve"
                width={300}
                height={150}
                lineLength={50}
                color="#96ceb4"
                duration={2}
              />
            </div>

            <div
              style={{
                textAlign: "center",
                width: "100%",
                height: "900px",
                position: "absolute",
                top: 0,
                left: 0,
                zIndex: 1000,
                transform: "rotate(-40deg) translate(0, 0)",
  
              }}
            >
              <h3 style={{ color: "white", marginBottom: "20px" }}>折线射线</h3>
              <LineAnimate
                type="zigzag"
                width={1900}
                height={1080}
                lineLength={1040}
                color="#5732ff"
                duration={5}
              />
            </div>

            <div style={{ textAlign: "center" }}>
              <h3 style={{ color: "white", marginBottom: "20px" }}>圆形射线</h3>
              <LineAnimate
                type="circle"
                width={800}
                height={400}
                lineLength={280}
                color="#ff6b6b"
                duration={3}
              />
            </div>

            <div style={{ textAlign: "center" }}>
              <h3 style={{ color: "white", marginBottom: "20px" }}>螺旋射线</h3>
              <LineAnimate
                type="spiral"
                width={250}
                height={250}
                lineLength={430}
                color="#feca57"
                duration={4}
              />
            </div>

            <div style={{ textAlign: "center" }}>
              <h3 style={{ color: "white", marginBottom: "20px" }}>手动播放</h3>
              <LineAnimate
                type="curve"
                width={300}
                height={150}
                lineLength={45}
                color="#32ff57"
                duration={2}
                autoPlay={false}
              />
            </div>
          </div>
        </div>
        <div style={{
          padding: "40px 20px",
          minHeight: "100vh",
        }}>
          <TextAnimate fontSize="48px" color="#ff8500" text="科技重塑未来" />
        </div>
      </ScrollView>
    </div>
  );
}
